import React, { useState, useEffect } from 'react';
import { Routes, Route, Navigate, useNavigate } from 'react-router-dom';
import { Spin, message, App as AntdApp } from 'antd'; // 引入 App 组件并重命名为 AntdApp
import Login from './pages/Login';
import Register from './pages/Register';
import NotFound from './pages/NotFound';
import Profile from './pages/Profile';
import Help from './pages/Help';
import Home from './pages/Home';
import DesignerPage from './pages/DesignerPage'; // 新建
import TestDesigner from './pages/TestDesigner'; // 新建
import SettingsPage from './pages/SettingsPage'; // 新建
import MainContent from './pages/MainContent';
import './App.css';
import { UserProvider } from './context/UserContext.jsx';
import { AppProvider } from './context/AppContext.jsx';
import { getProfile } from './api/user';
import RequireAuth from './components/RequireAuth';
import { useUser } from './context/UserContext.jsx';

function App() {
  const [isLogin, setIsLogin] = useState(!!localStorage.getItem('token'));
  const [user, setUser] = useState(null);
  const navigate = useNavigate();

  // 登录后刷新主页面
  const handleLogin = () => {
    setIsLogin(true);
    navigate('/');
  };
  // 退出登录
  const handleLogout = () => {
    localStorage.removeItem('token');
    setIsLogin(false);
    setUser(null);
    navigate('/login');
  };

  // 登录后获取用户信息
  useEffect(() => {
    if (!isLogin) return;
    getProfile()
      .then(data => {
        if (data && data.code === 401) {
          handleLogout();
          return null;
        }
        if (data && data.data && data.data.user) setUser(data.data.user);
      });
  }, [isLogin, setUser]);

  React.useEffect(() => {
    const onTokenExpired = () => handleLogout();
    window.addEventListener('token-expired', onTokenExpired);
    return () => window.removeEventListener('token-expired', onTokenExpired);
  }, []);

  // 不要在这里用 useApp 或 loading 判断
  return (
    <AntdApp> {/* 包裹整个应用 */}
      <UserProvider value={{ user, setUser }}>
        <AppProvider>
          <Routes>
            <Route path="/login" element={<Login onLogin={handleLogin} />} />
            <Route path="/register" element={<Register onGoLogin={() => navigate('/login')} />} />
            <Route path="/" element={<RequireAuth isLogin={isLogin}><MainContent onLogout={handleLogout} user={user} /></RequireAuth>} >
              <Route index element={<Home user={user} />} />
              <Route path="designer" element={<DesignerPage />} />
              <Route path="test-designer" element={<TestDesigner />} />
              {user && user.role === 'admin' && <Route path="settings" element={<SettingsPage />} />}
              <Route path="profile" element={<Profile user={user} />} />
              <Route path="help" element={<Help />} />
              <Route path="*" element={<NotFound />} />
            </Route>
            <Route path="*" element={<NotFound />} />
          </Routes>
        </AppProvider>
      </UserProvider>
    </AntdApp> // 结束 AntdApp 包裹
  );
}

export default App;